import * as React from "react";
import { Button, Input, Select } from "antd";
import { WebVariable } from "../../../../../../data/WebVariable";
import "./index.less";
const { Option } = Select;
export interface VirtualDeviceConditionProps {
  onSubmit: (data: VirtualDeviceConditionState) => any;
  subItem: any[];
}

export interface VirtualDeviceConditionState {
  devVal: string;
  energyType: string;
  typeId: string;
  subItem?: any[];
}

class VirtualDeviceCondition extends React.Component<
  VirtualDeviceConditionProps,
  VirtualDeviceConditionState
> {
  state = { devVal: "", energyType: "", typeId: "", subItem: [] };
  render() {
    return (
      <div className="VirtualDeviceCondition bare_body" style={{ padding: 16 }}>
        <span style={{ paddingLeft: 26 }}>设备名称：</span>
        <div className="changeType_btn d_inlineFlex">
          <Input
            className="input"
            placeholder="请输入设备信息"
            value={this.state.devVal}
            onChange={(e) => {
              this.setState({ devVal: e.target.value });
            }}
          />
        </div>
        <span style={{ paddingLeft: 26 }}>能源类型：</span>

        <Select
          defaultValue={this.state.energyType}
          className="searchselect"
          onChange={(event: string) => {
            this.setState({
              energyType: event,
            });
          }}
        >
          <Option value="" key="">
            全部
          </Option>
          {WebVariable.categoryType.map((item: any) => {
            return (
              <Option value={item.key} key={item.key}>
                {item.label}
              </Option>
            );
          })}
        </Select>
        <span style={{ paddingLeft: 26 }}>分项：</span>
        <Select
          placeholder="请选择分项"
          style={{ width: 120 }}
          value={this.state.typeId}
          onChange={(e: string) => {
            this.setState({ typeId: e });
          }}
        >
          <Option value="" key="">
            全部
          </Option>
          {this.state.subItem.map((province: any) => (
            <Option key={province.id + ""} value={province.id + ""}>
              {province.name}
            </Option>
          ))}
        </Select>
        <Button
          type="primary"
          style={{ marginLeft: 16 }}
          onClick={() => {
            this.props.onSubmit(this.state);
          }}
        >
          查询
        </Button>
      </div>
    );
  }
  componentWillMount() {}
  shouldComponentUpdate(
    newProps: VirtualDeviceConditionProps,
    newState: VirtualDeviceConditionState
  ) {
    if (newProps.subItem !== this.props.subItem) {
      this.setState({ subItem: newProps.subItem });
    }
    return true;
  }
}

export default VirtualDeviceCondition;
